<!-- 用户详情弹框 -->
<template>
  <div class="userinfo-box">

    <div class="dis-flex">
      <div class="avatar">
        <img :src="avatarUrl" alt="">
      </div>
      <div class="account">
        <div class="username">{{ userName }}</div>
        <div class="account-item">{{ account }}</div>
        <div class="account-item">{{ region }}</div>
      </div>
    </div>

    <n-divider />

    <div class="dis-flex alc">
      <div class="form-label">朋友圈</div>
      <div class="imgList">
        <n-avatar
          v-for="item in 4"
          size="medium"
          src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
        />
      </div>
    </div>

    <n-divider />

    <div class="dis-flex alc">
      <div class="form-label">视频号</div>
      <div class="imgList">
        <n-avatar
          v-for="item in 4"
          size="small"
          src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
        />
      </div>
    </div>

    <n-divider />

<!--  todo: 下面的按钮，后续也封装为组件  -->
<!--  自己头像就展示这个  -->
    <icon-button-vertical title="发消息" v-if="userId === 0">
      <svg-icon name="wx-msg-line" :size="18" />
    </icon-button-vertical>

<!--  其他人展示这个  -->
    <n-grid :cols="8" v-else>
      <n-gi :offset="1" :span="2">
        <icon-button-vertical title="发消息">
          <svg-icon name="wx-msg-line" :size="18" />
        </icon-button-vertical>
      </n-gi>
      <n-gi :span="2">
        <icon-button-vertical title="语音聊天">
          <svg-icon name="call" :size="18" />
        </icon-button-vertical>
      </n-gi>
      <n-gi :span="2">
        <icon-button-vertical title="视频聊天">
          <svg-icon name="video" :size="18" />
        </icon-button-vertical>
      </n-gi>
    </n-grid>

  </div>
</template>

<script setup>
import IconButtonVertical from "@/components/IconButtonVertical.vue";

const props = defineProps({
  // 用户id，默认为0，0表示自己
  userId: {
    type: Number,
    default: 0,
    required: true
  }
})

import { mockList, myBasicInfo } from "@/views/chat/chatList/mockList.js";
import { onMounted, ref } from "vue";

const avatarUrl = ref('')
const userName = ref('')
const account = ref('')
const region = ref('')

onMounted(() => {
  if (props.userId === 0) {
    avatarUrl.value = myBasicInfo.avatar
    userName.value = myBasicInfo.name
    account.value = myBasicInfo.account
    region.value = myBasicInfo.region
  } else {
    const userInfo = mockList.find(item => item.id === props.userId)
    if(userInfo) {
      avatarUrl.value = userInfo.avatar
      userName.value = userInfo.name
      account.value = userInfo.account
      region.value = userInfo.region
    }
  }
})

</script>

<style lang="scss" scoped>
.avatar img {
  width: 58px;
  height: 58px;
  border-radius: 4px;
}
.account {
  margin-left: 12px;
  .username {
    font-size: 16px;
  }
  .account-item {
    line-height: 20px;
    font-size: 12px;
    color: #999;
  }
}

.form-label {
  color: #999999;
  width: 60px;
}
</style>
